<template>
	<nav
		aria-label="Site Nav"
		class="mx-auto h-80px max-w-3xl flex items-center justify-between p-4"
	>
		<div class="flex items-center justify-center space-x-5">
			<SwitchIcon unmount-persets />
		</div>
		<ul class="flex items-center gap-2 text-sm font-medium">
			<li v-for="r of pathList" :key="r.path" class="hidden !block">
				<RouterLink class="rounded-lg px-3 py-2 hover:text-blue-700" :class="$route.path === r.path ? 'text-blue-700' : ''" :to="r.path">
					{{ te(r.name) ? t(r.name) : r.name }}
				</RouterLink>
			</li>


			<li class="hidden !block">
				<Dropdown />
			</li>
			<li class="cursor-pointer">
				<a v-if="!UserLogin.isLogin" href="/login" class="login-btn">登录/注册</a>
				<el-dropdown v-else>
					<el-avatar :size="38" :src="state.userInfo.profile" />
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="to('/userInfo')">个人中心</el-dropdown-item>
							<el-dropdown-item @click="to('/adminIndex')">后台管理</el-dropdown-item>
							<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</li>
		</ul>
	</nav>
</template>
<script setup lang="ts">
import { getRoutes } from '@/plugins/router'
import { SwitchIcon } from 'vue-dark-switch'
import { useRouter } from 'vue-router'
const UserLogin = userLogin()
const router = useRouter()
const { te, t } = useI18n()

const pathList =[
	{
		"path": "/",
		"name": "home"
	},

	{
		"path": "/item",
		"name": "item"
	}
]


const state = reactive({
	userInfo: {},
})
/**
 * 退出登录
 */
function logout() {
	http.post('/user/logout').then(() => {
		router.push('/login')
		//清空
		UserLogin.token = undefined
		UserLogin.isLogin = false
	})
}
onMounted(() => {
	if (UserLogin.isLogin) {
		http.get('user/userInfo').then((res) => {
			state.userInfo = res.data
		})
	}
})
function to(href: string) {
	window.location.href = href
}
</script>
<style scoped>
.login-btn {
	margin-left: 20px;
	width: 88px;
	height: 27px;
	cursor: pointer;
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
	height: 26px;
	line-height: 26px;
	padding: 0 11px;
	min-width: 0;
	margin-left: 10px;
}

a:hover {
	color: #00bebd;
}
</style>
